<template>
	<Content :style="{padding: '0 16px 16px'}">

		<Breadcrumb :style="{margin: '20px 0'}">
			<BreadcrumbItem>笔记管理</BreadcrumbItem>
		</Breadcrumb>
		<Card>
			<div>
				<Button type="primary" @click="addArticle()">发表文章</Button>
				<span style="float: right;"><Input search enter-button="搜索" placeholder="请输入标题" /></span>
				<br> <br>
				<Table border :columns="columns7" :data="data6"></Table>
				<br />
				<Page :total="100" show-sizer />
			</div>
		</Card>
	</Content>
</template>

<script>
	export default {
		data() {
			return {
				columns7: [{
						title: '标题',
						key: 'name',
						render: (h, params) => {
							return h('div', [
								h('Icon', {
									props: {
										type: 'person'
									}
								}),
								h('strong', params.row.name)
							]);
						}
					},
					{
						title: '发表人',
						key: 'age'
					},
					{
						title: '描述',
						key: 'address'
					},{
						title: '发表时间',
						key: 'address'
					},{
						title: '操作',
						key: 'action',
						width: 200,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.index)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.editorArticle(params.index)
										}
									}
								}, '编辑'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.index)
										}
									}
								}, '删除')
							]);
						}
					}
				],
				data6: [{
						name: 'John Brown',
						age: 18,
						address: 'New York No. 1 Lake Park'
					},
					{
						name: 'Jim Green',
						age: 24,
						address: 'London No. 1 Lake Park'
					},
					{
						name: 'Joe Black',
						age: 30,
						address: 'Sydney No. 1 Lake Park'
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park'
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park'
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park'
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park'
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park'
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park'
					},
					{
						name: 'Jon Snow',
						age: 26,
						address: 'Ottawa No. 2 Lake Park'
					}
				]
			}
		},
		methods: {
			addArticle() {
				this.$router.push({
					path: '/admin/article/add'
				});
			},
			editorArticle() {
				this.$router.push({
					path: '/admin/article/editor'
				});
			},
			show(index) {
				this.$Modal.info({
					title: 'User Info',
					content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
				})
			},
			remove(index) {
				this.data6.splice(index, 1);
			}
		}
	}
</script>